<template>
  <div>
    <a-button type="primary" v-if="!record" @click="dialog = true">新增用户 </a-button>
    <a v-else @click="dialog = true">编辑</a>
    <a-modal v-model="dialog" title="新增用户" @ok="submit" :width="800">
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :hideRequiredMark="true"
      >
        <div class="grid grid-cols-2">
          <a-form-model-item label="姓名：" prop="name">
            <a-input v-model="form.name" />
          </a-form-model-item>
          <a-form-model-item label="账号：" prop="username">
            <a-input v-model="form.username" />
          </a-form-model-item>
        </div>
        <div class="grid grid-cols-2">
          <a-form-model-item label="密码：" prop="password">
            <a-input v-model="form.password" />
          </a-form-model-item>
          <a-form-model-item label="角色：" prop="roleId">
            <a-select v-model="form.roleId">
              <a-select-option :value="item.id" v-for="item in roleList" :key="item.id">
                {{ item.roleName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <div class="grid grid-cols-2">
          <a-form-model-item label="邮箱：" prop="email">
            <a-input v-model="form.email" />
          </a-form-model-item>
          <a-form-model-item label="手机号：" prop="phone">
            <a-input v-model="form.phone">
              <a-select slot="addonBefore" v-model="form.areaCode" prop="areaCode">
                <a-select-option :value="item.value" v-for="item in area" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-input>
          </a-form-model-item>
        </div>
        <div class="grid grid-cols-2">
          <a-form-model-item label="公司：" prop="company">
            <a-select v-model="form.company" prop="areaCode">
              <a-select-option :value="item" v-for="item in companys" :key="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { creatSysUser, getSysUser, updataSysUser, getOnlySysUser } from '@/api/common'
import { roleType, area } from '@/dict'
import { emailRule, commonRule } from '@/utils/rules'
export default {
  name: 'addUser',
  props: ['record'],
  data() {
    return {
      dialog: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
      roleType,
      area,
      companys: ['DC', 'Prosper'],
      form: {
        name: '',
        username: '',
        password: '',
        roleId: 1,
        email: '',
        phone: '',
        areaCode: '+64',
        company: 'DC'
      },
      rules: {
        name: commonRule,
        username: commonRule,
        password: commonRule,
        roleId: commonRule,
        email: emailRule,
        phone: commonRule,
        company: commonRule
      }
    }
  },
  watch: {
    dialog(v) {
      if (v && this.record) {
        this.getData()
      }
    }
  },
  computed: {
    roleList() {
      return this.$store.getters.roleList
    }
  },
  methods: {
    async getData() {
      const res = await getOnlySysUser(this.record.id)
      const data = res.result.data
      for (let k in this.form) {
        this.form[k] = data[k]
      }
    },
    async submit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // await creatLoanDelay(form)
          if (this.record) {
            await updataSysUser(this.record.id, this.form)
            this.$emit('update')
            this.dialog = false
          } else {
            await creatSysUser(this.form)
            this.form = {
              name: '',
              username: '',
              password: '',
              roleId: 1,
              email: '',
              phone: '',
              areaCode: '+64',
              company: 'DC'
            }
            this.$emit('update')
            this.dialog = false
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
